手把手带你搭建个人博客(汇总版)
点击下方公众号,回复资料分享,收获惊喜
简介
你是不是特别想创建一个自己的私人博客?以及为什么要使用 blogdown 搭建博客?难度是不是很大,和其他搭建博客而言有什么优点?
在小编使用过一段时间后,个人认为 blogdown 搭建博客的优势在于,将 Rmarkdown 与 hugo 相结合,再加上 github 和一个可以部署的网站。你可以轻松的将一篇篇 Rmarkdown 的文章自动上传上去。而 Rmarkdown 的优势在于,你的代码结果都可以轻松呈现。而不是“复制粘贴”结果!
如果你还不会 Rmarkdown,那请你先看看文末为你提供的 Rmarkdown 学习大礼包,结合 b 站视频学习效果更佳,有疑问可以在公众号提问,小编愿意为你解答。
本文是小编在学习和使用中记录的一个非常详细的笔记,主要参考:谢益辉的《blogdown: Creating Websites with R Markdown》[1],王诗翔的 b 站直播视频[2](公众号:优雅 R )以及一些 YouTube 视频教程[3]。
1. 入门教程
1.1 安装
首先你需要安装 blogdown 包
install.packages("blogdown")
注意:我们的操作是在 Rstudio下进行操作的。
1.2 创建
安装完后,新建一个新的 Project(File-New project)
,然后选择New Directory
。之后鼠标滑到底部,找到 Website using blogdown
并点击进入。
此时进入一下界面,项目名称建议使用英文,目录自行选择。默认情况下 Hugo theme
是谢益辉的模板,这里我将其进行拓展,使用了另一个个人比较喜欢的主题:Fastbyte01/KeepIt
,左下角勾选打开新的 session。
注意:为了保证整个演示流程的完整性,小编将其他主题选择教程放到文末作为附加内容。请大家注意我这个演示的逻辑,以免越学越糊涂。并且该教程也是小编在前段时间反复试错得到的。
新建后的界面如下,右下角给出了整个项目的文件,其中圈起来的最为关键,我们稍后介绍,先编译下这个初始的 blogdown。
编译
选择 Tool - addins
(windows 更方便找到)然后选择以下按钮。
稍等片刻,这时就可以得到最为原始博客模板啦!
如果你做到这,恭喜你!基本已经会 1/3 了!没错就是这么简单。
1.3 模板修改
不同的模板修改起来是不一样的,但是原理类似,如果你知道一些 html 的知识,那可能会更好。如果不会,就慢慢改咯!
使用技巧:改一个地方,报错下,右下角 viewer 会自动编译,你可以根据变化看看是不是你想要的结果(“笨”方法)。
这里以我这个模板为例子:主要修改的是 config.yaml
文件,首先将其打开,得到的界面如下:
主要改的是title(4行),subtitle(84行),这时候保存下该文件,右下角即可快速得到以下界面:
如果你想修改这个头像,可以在该 yaml 文件的第 34 行找到代码 avatar: /images/me/avatar.jpeg
。此时从桌面打开该文件夹,更换该 jpeg 文件即可,例如:
此时如果界面没有更新(可能是 bug),你可以运行一下代码,类似重启一下:
blogdown::stop_server()
blogdown:::serve_site()
1.4 将项目与 github 相连
本地博客基本构建完毕,接下来我们要讲其连接到自己的 github 上,再部署到免费的网站上。
首先先将该文件夹上传到自己的 github 上,你可以使用 Git,但是小编表示不大熟,所以就使用按钮式操作的桌面版本 github 了。
注意:如果你第一次使用 github,以及还没下载 GitHub 桌面版本的小白。你可以通过百度搜索,简单学习下。这里我就不做介绍了(我也不是很会,就不班门弄斧了)
github 桌面版本操作
连接本地的文件夹(zss),按照下面的图片操作。
之后如果出现一下界面,可以按照我做的操作:点击蓝色字
跳转到这里的界面,这个将是线上github仓库的名字啥的设置。写好后,就可以创建新的仓库了。
之后将创建好的仓库publish上去。记得将其Keep this code private 的勾取消了(变成公开的仓库)。
查看是否上传
这时候你可以去网上自己的GitHub确认下,是否有这个仓库,我的如下。
这时候本地的项目和 github 已经连接好啦!
恭喜你,这时候你已经回了2/3啦!马上就可以拥有自己的私人网站啦!
1.5 使用 Netify 部署网站
这里我使用的 Netify:https://app.netlify.com。当然你也可以使用其他方式进行部署,具体可见 Creating Websites with R Markdown 的第三章节[4]。
首先是注册啦(这里我已经忘记怎么操作了,因为创建很久了,不过不难,如果进不去可能你需要科学上网)。之后将其与 github 相连接,进入以下界面:
点击新建一个 site 来自 Git,之后跟着步骤往下做。点击左下角的 Github,之后选择刚才我们创建的那个仓库(zss)。
之后根据下面的界面进行部署网站。
这时候,部署需要一些时间,得到下面的界面,你可以通过 Site settings 修改自己的网站名(这里不做演示,很简单)。
稍等片刻得到以下界面,点击网站的链接,即可得到你自己的网站啦!
恭喜你,结束啦!你已经会简单创建自己的网站啦!
当然你可以在前面说的 site settings 重新设定网站的名字,例如我的 demo 网站是:https://zss001.netlify.app/
2. 工作流
在前面几项任务都完成好后,接下来创建 rmd 文件,保存,github 提交,之后过几分钟网站就会自动同步你的最新博客啦!
这整个流程非常香,你唯一担心的是:如何写好你的博客。你完全不需要担心如何排版,如何部署 rmd/md 文件等问题。这就回到了最为纯粹的知识输出环节啦!
接下来,将会告诉你如何创建新的 post 以及如何提交(内容非常简单)。
2.1 创建 RMD 文件
打开你项目所在的文件夹(zll-blog),点击 Rproject 文件。小编平常直接打开桌面版本的 github,找到对应的 Repository,然后按快捷键(红色框框给出了,Show in Finder)如下所示:
当然,你可以按快捷键直接进入网上的 Github 仓库。
进入 Rstudio 界面后,打开你的插件 addin。mac 是在菜单栏 Tools -> addins
中,windows 直接在菜单栏就有一个小按钮 addins
了。然后选择下面红色框住的内容,并点击执行(Execute)即可。
或者你直接在控制台输入代码也可以创建新的 Post(
blogdown::new_post()
)。当然你可以在打开这个Project之后先把博客渲染出来(blogdown::serve_site()
)。
之后会跳转出一个框框,你按照自己想写的填充就好啦!注意 Format 有三种形式。小编的一些与 R 代码无关的就是直接创建 .md 文件写的。然后点击 Done 按钮,即可。
2.2 填写内容
之后跳转到下面的界面,这时候如果你提前已经渲染了博客,右边的 Viewer 窗口就会自动同步你写的东西。
接下来,内容就要靠你自己啦!你可以写一些笔记,想法等。小编这里给出前段时间写的一篇博客的内容作为示范。
注意:如果你不会使用 markdown 文件写文章的话。请您转到:1.5w字的Rmarkdown入门教程汇总。或者你有其他写好的 md 文件的话。你可以直接将其导入即可。但是注意的是,图片等需要你手动添加到对应的目录下。
保存之后,你的 new post 就已经完成啦!
2.3 使用 github 上传内容
最后一步,就是将你刚才修改过的内容,通过 github 进行上传。操作流程如下图所示,之后等几分钟,Netify 网站知道你的该 github 仓库内容出现变化后,会自动部署新的网站。
这时一切完毕!恭喜你已经掌握整个搭博客和写博客的流程啦!
附件:hugo 主题选择
hugo主题网站[5]给出了很多免费试用的主题模板,你可以选择一个你自己喜欢的主题(不需要和我上面一样),该网站的封面如下:
小编刚使用的是:A simple but not simpler blog theme for Hugo[6],进入之后的界面如下,然后点击View Github进入对应的仓库。
小编有话说
如果你是初学者,对 Rstudio,github,hugo,html 都不是很熟悉的话。庄小编建议你将我前面说的整个流程照搬实现一次先。然后再拓展下,创建其他不同的 hugo 模板。
小编以前就是好高骛远,拿一个很新奇的作为模板,结果后面出错了,始终找不到问题所在。一遍流程都走不下来。
搭建自己的博客,对于小编来说只是一个兴趣爱好。当然也需要一定的时间和精力去维护(添加内容啦)。
参考资料
《blogdown: Creating Websites with R Markdown》: https://bookdown.org/yihui/blogdown/
[2]b 站直播视频: https://www.bilibili.com/video/BV13v41147BH?from=search&seid=3349593737199514913
[3]YouTube 视频教程: https://www.youtube.com/watch?v=ox_Ue9yzf-0
[4]第三章节: https://bookdown.org/yihui/blogdown/deployment.html
[5]hugo主题网站: https://hugothemesfree.com/
[6]A simple but not simpler blog theme for Hugo: https://hugothemesfree.com/a-simple-but-not-simpler-blog-theme-for-hugo/
推荐: 可以保存以下照片,在 b 站扫该二维码,或者 b 站搜索【庄闪闪
】观看 Rmarkdown 系列的视频教程。Rmarkdown 视频新增两节视频(写轮眼幻灯片制作)需要视频内的文档,可在公众号回复【rmarkdown
】
R沟通|Bookdown中文书稿写作手册(上)
R沟通|使用 blogdown 创建你的博客(2)
R沟通|使用 Blogdown 构建个人博客
R沟通|Typora字体颜色设置
R沟通|使用latex模板构建个人履历